import React, { useEffect, useRef, useState } from 'react';
import * as echarts from 'echarts';
import ReactECharts from 'echarts-for-react';
import 'echarts-gl'; // Import ECharts-GL for 3D map support
import geoJsonData from './hk.json';
import Background from './image/a1.png';
import {Dialog,DialogTitle,DialogContent,DialogActions,Button} from '@mui/material';
//https://www.cnblogs.com/tutuj/p/14361687.html
const MapChart: React.FC = () => {
  const chartRef = useRef<any>(null);
  
  const [open, setOpen] = React.useState(false);
   
    const handleClickOpen = () => {
      setOpen(true);
    };
   
    const handleClose = () => {
      setOpen(false);
    };
//itemStyle: { color: geoJsonData.features[i].properties.color,borderWidth:0.5,borderColor:'#97C9F4'}
//label: { show: true, color: '#FFF', fontWeight: 'bold' }
   var regionsArr = [];
  for (var i = 0; i < geoJsonData.features.length; i++) {
    regionsArr.push({ name: geoJsonData.features[i].properties.name,label: { show: true, color: '#FFF', fontWeight: 'bold' },itemStyle: { color: geoJsonData.features[i].properties.color,borderWidth:0,borderColor:'#97C9F4'} });
  }

  var iconUrl = `vite.svg`;
  var labelUrl = './image/a1.png'
  
  var scatterData = [
              {
                value: [114.11950165817896, 22.370075608974137,100],  // 中西区的散点位置
                name: '仁濟醫院',
              },
  			{
  			  value: [114.04383725244615, 22.456870826594287,100],  // 中西区的散点位置
  			  name: '博愛醫院',
  			},
			{
			  value: [114.17474523728687, 22.458929642078893,100],  // 中西区的散点位置
			  name: '雅麗氏何妙齡那打素醫院',
			},
			{
			  value: [114.15248855081948, 22.340771200005076,100],  // 中西区的散点位置
			  name: '明愛醫院',
			},
			{
			  value: [114.1721706949533, 22.314637382070543,100],  // 中西区的散点位置
			  name: '廣華醫院',
			},
			{
			  value: [114.12466146797478, 22.4970081523381,100],  // 中西区的散点位置
			  name: '北區醫院',
			},
			{
			  value: [113.9392599661164, 22.282276272056258,100],  // 中西区的散点位置
			  name: '北大嶼山醫院',
			},
			{
			  value: [114.23628675262331, 22.26981770842455,100],  // 中西区的散点位置
			  name: '東區尤德夫人那打素醫院',
			},
			{
			  value: [114.21930280752275, 22.42118213007489,100],  // 中西区的散点位置
			  name: '威爾斯親王醫院',
			},
			{
			  value: [114.13440065208796, 22.340547251865516,100],  // 中西区的散点位置
			  name: '瑪嘉烈醫院',
			},
			{
			  value: [114.17436933547623, 22.30934041224049,100],  // 中西区的散点位置
			  name: '伊利沙伯醫院',
			},
			{
			  value: [114.13131194522076, 22.27013885098009,100],  // 中西区的散点位置
			  name: '瑪麗醫院',
			},
			{
			  value: [114.17532655262357, 22.276034014295046,100],  // 中西区的散点位置
			  name: '律敦治醫院',
			},
			{
			  value: [114.0315189949496, 22.208227772714412,100],  // 中西区的散点位置
			  name: '長洲醫院',
			},
			{
			  value: [113.99580609680912, 22.458724041226496,100],  // 中西区的散点位置
			  name: '天水圍醫院',
			},
			{
			  value: [114.26974986611764, 22.318434881653477,100],  // 中西区的散点位置
			  name: '將軍澳醫院',
			},
			{
			  value: [113.97635933331487, 22.407706261242332,100],  // 中西区的散点位置
			  name: '屯門醫院',
			},
			{
			  value: [114.2270185237895, 22.323331227435908,100],  // 中西区的散点位置
			  name: '基督教聯合醫院',
			}
            ];
  		  var data3d = scatterData.map(el => {
  		     return {
  		        name: el.name,
  		        value: el.value,
  		     }
  		  });
  		  var labelData = scatterData.map(el => {
  		     return {
  		        name: el.name,
  		        value: el.value,
  		        symbol: "pie",
  		        itemStyle:{
  		           color:"transparent",
  		        },
  		        label: {
  		           show: true,
  		           formatter(params) {
  		              return params.name;
  		           },
  		        },
  		     };
  		  })
	
  var option = {
    tooltip: {
      trigger: 'item',
	  padding: 0,
      renderMode: 'html',
	   formatter: `<div style="padding:5px;background-color:red;height:200px;width:500px">
		<div style="font-weight:bold;">North District Hosptial</div>
		<div style="font-weight:lighter;">Remaining amount of hospital beds: <span style="font-weight:bold;color:green;">112</span></div>
		<div style="font-weight:lighter;">Inpatients in: <span style="font-weight:normal">98</span></div>
		<div style="font-weight:lighter;">Inpatients out: <span style="font-weight:normal">112</span></div>
	   </div>`
    },
    geo3D: {
      show: true,
      map: 'HKDistricts',
	  left: "0%",
	  roam: true,
	  regionHeight: 5,
	  postEffect: {
	              enable: true,
	              SSAO: {
	                  enable: true,
	                  radius: 5,
	                  intensity: 1
	              }
	          },
      regions: regionsArr,
    },



    series: [
       {
          type: "scatter3D",
          coordinateSystem: "geo3D",
          data: data3d,
    	  //circle
          symbol: "circle",
    	  // symbolSize: 50,
          symbolSize: 20,
          itemStyle: {
             color: "transparent",
          },
		 //  itemStyle: {
			// color: "red",
		 //  },
          label: {
             show: true,
             position: "top",
             distance: -59,
             formatter: "{b}",
            
             textStyle: {
                color: "transparent",
                padding: [15, 17],
                backgroundColor: {
                   image: iconUrl,
                },
             },
          },
          emphasis: {
             label: {
                show: true,
                textStyle: {
                   backgroundColor: {
                      image: iconUrl,
                   },
                },
             },
          },
            
       },
       // {
       //    type: "scatter3D",
       //    coordinateSystem: "geo3D",
       //    data: labelData,
       //    label: {
       //       show: false,
       //       position: "top",
       //       distance: -1,
       //       textStyle: {
       //          color: "#ffffff",
       //          backgroundColor: {
       //             // image: labelUrl
       //          },
       //          padding: [10, 10, 20, 10],
       //          borderWidth: 1,
       //          borderRadius: 6,
       //       },
       //    },
       // },
    ],
  };

  useEffect(() => {

    // Register the map
    echarts.registerMap('HKDistricts', geoJsonData);

    if (chartRef.current) {
      const chartInstance = chartRef.current.getEchartsInstance();
	  console.log(chartInstance.getOption())
      chartInstance.setOption(option);
	  // chartInstance.on("click", function(e) {
		 //  var update_option = chartInstance.getOption();
		 //  update_option.geo3D[0].viewControl.distance = update_option.geo3D[0].viewControl.distance - 200;
   //        if (e.data.name == "仁濟醫院") {
   //            update_option.geo3D[0].viewControl.alpha = 70;
   //            update_option.geo3D[0].viewControl.center = [-3,2,0];
   //        } else if (e.data.name == "博愛醫院") {
   //            update_option.geo3D[0].viewControl.alpha = 70;
   //            update_option.geo3D[0].viewControl.center = [-19,55,5];
   //        }
   //        for (var i = 0; i < update_option.series[0].data.length; i++) {
   //            if (update_option.series[0].data[i].name == e.data.name) {
   //                update_option.series[0].data[i].label.textStyle.color = "#ff0000";
   //                break;
   //            }
   //        }
		 //  chartInstance.setOption(update_option);
		 //  handleClickOpen();
	  // });
    }
  }, []);

  function add() {
    let update_option = chartRef.current.getEchartsInstance().getOption();
    update_option.geo3D[0].viewControl.distance = update_option.geo3D[0].viewControl.distance - 20;
    chartRef.current.getEchartsInstance().setOption(update_option);
  };

  function sub() {
    let update_option = chartRef.current.getEchartsInstance().getOption();
    update_option.geo3D[0].viewControl.distance = update_option.geo3D[0].viewControl.distance + 20;
    chartRef.current.getEchartsInstance().setOption(update_option);
  }

  function reset() {
    chartRef.current.getEchartsInstance().setOption(option);
  }
  
  function back() {
	  const chartInstance = chartRef.current.getEchartsInstance()
	  option.series[0].data = optionData;
	  option.geo3D.map = 'HKDistricts';
	  option.geo3D.regions = regionsArr;
	  //option.geo3D.itemStyle.borderWidth = 1;
	  chartInstance.setOption(option);
	  chartInstance.resize();
	  reset();
  }

  // function turn() {
  //   let update_option = chartRef.current.getEchartsInstance().getOption();
  //   if (update_option.series[0].type === 'bar3D') {
  //     update_option.series[0].type = 'map';
  //     delete update_option.series[0].coordinateSystem;
  //     chartRef.current.getEchartsInstance().setOption(option);
  //   }

  //   if (update_option.series[0].type === 'map') {
  //     option.series[0].type = 'bar3D';
  //     chartRef.current.getEchartsInstance().setOption(option);
  //   }
  // }

  return (<>
	<div>
    <ReactECharts
      ref={chartRef}
      style={{ height: '600px'}}
      option={{
        series: [

        ],
      }}
    />
	<Dialog open={open} onClick={handleClose}>
		<DialogTitle>对话框标题</DialogTitle>
		<DialogContent>	
		  <p>这里是对话框的内容区域。</p>
		</DialogContent>
		<DialogActions>
		  <Button onClick={handleClose}>关闭</Button>
		</DialogActions>
	</Dialog>
    <button type='button' onClick={add}>+</button>
    <button type='button' onClick={sub}>-</button>
    <button type='button' onClick={reset}>reset</button>
	</div>
    {/* <button type='button' onClick={turn}>turn</button> */}
  </>);
};

export default MapChart;
